<template>
    <div style="margin-left: 20px;">
        <div class="picker" style="margin-top: 20px;">


            <div >
                <el-date-picker
            
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            >
            
          </el-date-picker>
            </div>
           

        </div>
<div class="line_chart">
<div id="container1" >
</div>
<div id="container2" >
</div>


</div>
</div>
<div  class="tabname_two"><h1>渠道统计报表</h1>
<!-- <button class="btn" @click="export2Excel()">导出</button> -->
</div>
<!-- //==============================================导出以下table表格 -->
<div class="box2">
  <div class="inp">
  <el-form 
 
   :inline="true"
   :model="formInline" 
  label-position="top"
  style="display: flex; align-items: center;
 justify-content: space-between;
 background-image: linear-gradient(to left, rgba(205, 205, 205, 0.109), transparent), linear-gradient(to right, rgba(205, 205, 205, 0.089), transparent);
 border-radius: 40px;
"
  >

  <el-form-item label="活动编号：">
    <el-input v-model="formInline.code" placeholder="请输入归属人" style="width: 100%"></el-input>
  </el-form-item>
    <el-form-item label="活动名称：">
    <el-input v-model="formInline.name" placeholder="请输入归属人" style="width: 100%"></el-input>
  </el-form-item>
<el-form-item  label="&nbsp"  >
  <el-button type="primary" round  @click="onSubmit">搜索</el-button>
  <el-button type="info" round  @click="btnResetform">重置</el-button>
</el-form-item>


  </el-form>
</div>
 
<!-- ===================================================table -->
<el-table :data="customerTable" stripe>
  <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
 
 type="index"
 label="顺序"
 width="100px"

 align="center"
 
/>
  <el-table-column
      prop="channel"
      label="渠道来源"
   >
    </el-table-column>
  <el-table-column
      prop="code"
      label="活动编号"
      width="120px"
   >
    </el-table-column>
  <el-table-column
      prop="name"
      label="活动名称"
      align="center"
      width="160px"
   >
    </el-table-column>
  <el-table-column
      prop="info"
      label="活动简介"
      align="center"
      width="160px"
   >
    </el-table-column>
  <el-table-column
      prop="cluesNum"
      label="线索总数"
      align="center"
   >
    </el-table-column>
  <el-table-column
      prop="falseCluesNum"
      label="伪线索数"
      align="center"
      width="160"
   >
    </el-table-column>
    
  <el-table-column
      prop="businessNum"
      label="转化商机数"
      align="center"
      width="120px"
     
   >
    </el-table-column>
    <el-table-column
      prop="customersNum"
      label="转化客户数"
      align="center"
      width="120px"
   >
    </el-table-column>
    <el-table-column
      prop="amount"
      label="成交金额"
      align="center"
   >
    </el-table-column>
    <el-table-column
      prop="cost"
      label="活动成本"
      align="center"
   >
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
      align="center"
      width="180px"
      sortable
   >
    <template #default="{ row }">
          {{ formatTimestamp(row.creationTime) }}
        </template>
    </el-table-column>
  <el-table-column
      label="操作"
      align="center"
   >
   <el-button  type="text" >详情</el-button>
    </el-table-column>
   
</el-table>
<div class="block" >
<!-- //            ====分页======= -->
<el-pagination
      :page-sizes="[10, 20, 30]"
      :current-page="queryParams.page"
      :small="small"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryParams.total"
      :background="false"
      @current-change="changePage"
      @size-change="changeSize"
     />
  </div>

</div>

       

</template>

<script setup>//=====================================================script===========================


// import Piecontainer_two from './Piecontainer_two.js'
import {ref,onMounted  } from "vue";
import dayjs from "dayjs";
import {Pie, } from '@antv/g2plot';//导入饼图
const value1=ref('')
const customerTable=ref([])//渲染table的数据
const formInline=ref({
  code:'',//活动编号
  name:"",//活动名称
})
const queryParams=ref({
  page: "1",
  pageSize: 2,
  total:'',
  "beginCreateTime": "2022-06-12 ",
    "endCreateTime": "2023-06-17",
    "code": "",
    "activityName": ""
  // belonger: "园园",
  // departmenTaffiliation: "学习部门",
  // sourceChannel: "线上活动"
})
// const options =ref([ {
//     value: '线上活动id',
//     label: 'sourceChannel线上活动id',
//   },
//   {
//     value: '学习部门id',
//     label: 'departmentAffiliation学习部门id',
//   },
//   ])
import { getlistTable1,getchannelspie } from "@/api/count.js";


// const showContainer=ref(true)//控制饼图开关

//、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 分页
const changePage=async(val)=>{
  queryParams.value.page=val
  await getlistTableAPI()

}
const changeSize=async(val)=> {
console.log(val);
  queryParams.value.pageSize = val;
  queryParams.value.page = val;
await  getlistTableAPI();
}
// ================================  获得饼数据
const getchannelspieAPI=async()=>{
const res=await getchannelspie({
  beginCreateTime: '2022-06-12', 
endCreateTime: '2023-06-17'
})
console.log('渠道饼图数据获取',res);
}
//   //饼图数据



    // const otherIndex = index === 0 ? 1 : 0 // 判断另一个按钮的索引
    //   const tempType = type.value[otherIndex] // 保存另一个按钮的类型
    //   type.value[otherIndex] = type.value[index] // 修改另一个按钮的类型
    //   type.value[index] = tempType // 修改当前按钮的类型

//  type.value[index] = type.value[index] === 'primary' ? 'default' : 'primary';
    // 其他逻辑...

    // showContainer.value = Boolean(index)// 如果 1 true 0 false
    // index===1?renderPieChart():0

//折线
const renderLineChart=()=>{
  const data = [
    { type: '线上活动', value: 60 },
  { type: '推荐介绍', value: 20 },
  { type: '其他自定义', value: 20 },
 
];
const container = document.getElementById('container1');
const piePlot = new Pie(container, {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  tooltip: {
      enterable: true,
      formatter: (datum) => {
        // 在Tooltip提示消息内容后面添加百分号
        return {
          name: datum.type,
          value: datum.value + '%',
        };
      },
    },
  radius: 1,
  legend:{
    position: 'bottom', // 自定义位置
  },
  label: {
    type: 'outer',
    content: '',
   
  },
  interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
});

piePlot.render();
 

}
//two-pie
const renderPieChart=()=>{
  const data = [
    { type: '双旦促销', value: 28.26 },
    { type: '火热开学季', value: 10 },
    { type: '春节特惠', value: 15 },
  { type: '中秋特惠', value: 27.26 },

];
const container=document.getElementById('container2')
const piePlot = new Pie(container, {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 0.7,
 
  legend:{
    position: 'bottom', // 自定义位置
  },
  innerRadius: 0.6,
  tooltip: {
      enterable: true,
      formatter: (datum) => {
        // 在Tooltip提示消息内容后面添加百分号
        return {
          name: datum.type,
          value: datum.value + '%',
        };
      },
    },
  label: {
    type: 'inner',
    offset: '-50%',
    content: '',
    
    style: {
      textAlign: 'center',
      fontSize: 14,
    },
  },
  interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
  statistic: {
    title: false,
    content: {
      style: {
        whiteSpace: 'pre-wrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      },
      content: '成交客户2700个',
    },
  },
});

piePlot.render();

}
//                                            table获取搜索数据
const getlistTableAPI=async()=>{
const {data,total}= await getlistTable1(queryParams.value)
console.log('渠道数据',data);
customerTable.value=data
// options.value=res
queryParams.value.total=total

}
const formatTimestamp = (timestamp) => {
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
};
///重置按钮
const btnResetform=()=>{
  formInline.value={
    code:'',//编号
    name:"",//名称
  
}
queryParams.value.page=1
getlistTableAPI()
// getlistTable()
}
//搜索按钮
const onSubmit = async()=>{
  console.log('搜索框里面内容',formInline.value);
  const res= await getlistTable1(
{...queryParams.value,...formInline.value}
  )
  console.log('搜索返回结果',res);
  customerTable.value=res.data
  queryParams.value.page=1
  queryParams.value.total=res.total
  // getlistTableAPI()

}
onMounted(()=>{
  getlistTableAPI()//table获取搜索数据
  renderLineChart()//饼left
  renderPieChart()//饼right
  // getchannelspieAPI()
})

</script>
<style scoped lang="less">
.picker{
    display: flex;
    justify-content: space-between;
    .right_btn{
       width: 220px
       ;
       height: 40px;
       display: flex;
       justify-content: space-evenly;
        // margin-left: 70%;
        margin-right: 20px;
        border-radius: 5px;
        padding: 4px;
        border: 1px solid rgba(171, 168, 168, 0.052);
        background-color: #cdcdcd28;
        button{
          border: 1 solid red;
        }
        ul{
list-style-type: none;
display: flex;
padding-left: 0px;
margin-left: 2px;
li{
  margin-top: -4px;
  color: #aeb5c4;
  font-size: 14px;
  height: 32px;
  border-radius: 6px;
  padding: 0px 7px;
  font-family: PingFangSC,PingFangSC-Semibold;
  font-weight: 600;
  display: flex;
  width: 95px;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.2s ease-in-out;
}
        }
        .active{
          color: #05cc95;
          transition: all 0.5s ease-in-out;
          background-color: rgb(255, 255, 255);
          box-shadow: 0 6px 1px 0 rgba(0,0,0,.06);

        }
    }
}
.line_chart{
    margin-top: 20px;
    background-color: rgba(135, 207, 235, 0);
    width: 100%;
    height: 430px;
    display: flex;
    #container1{
      flex: 1;
    }
    #container2{
      flex: 1;
    }
// #container2{
//   // width: 100%;
//   //   height: 430px;
//     // background-color: #78a721;
// }
}
.tabname_two{
      height: 80px;
      background-color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .btn{
        background-color: rgb(253, 112, 100);
        border-radius: 40px;
        border: none;
        height: 40px;
        width: 100px;
        color: #ffffff;
        font-size: 17px;
        margin-right: 40px;
      }
    }
    .inp{
    
     margin-bottom: 10px;
      padding: 25px 56px 14px 17px;
  h3,h5{
   
    font-weight: 300;
  }
    }
    .block{
      display: flex;
      justify-content: center;
      padding: 2px 5px;
      margin-top:24px;
    }
    #container_two{
      width: 100%;
      height: 350px;
    }
    #container{
      width: 100%;
      height: 350px;
    }
</style>
<!-- //渠道 -->